/**
 * Created by linyi on 2019/3/11
 */
.page--login {
  height: 100%;
  background-image: linear-gradient(135deg, #57b642 0%, #209a04 100%);
  position: relative;

  .float-area {
    position: absolute;
    width: 1125px;
    top: 22%;
    left: calc((100% - 1125px) / 3);
  }

  .bg-box {
    float: left;
    width: 660px;
    height: 500px;
    background-image: url('~Imgs/login-bg.png');
    background-size: cover;
    background-repeat: no-repeat;
  }

  .form-box {
    position: relative;
    width: 350px;
    float: right;
    margin-top: 18px;
    padding: 50px 40px;
    background: #ffffff;
    box-shadow: 0 10px 20px 0 rgba(92, 92, 92, 0.23);
    border-radius: 5px;

    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 31px;

      h1 {
        font-size: 26px;
        font-weight: 600;
        color: #292929;
        line-height: 37px;
        margin-bottom: 0;
      }

      .return-btn {
        color: #949494;
        font-size: 14px;

        i {
          color: #40c123;
        }
      }
    }

    .ant-form-item {
      margin-bottom: 0;
    }
    .ant-form-item + .ant-form-item {
      margin-top: 26px;
    }
    .ant-form-explain {
      display: none;
    }

    .err-box {
      padding: 15px 0;
      height: 80px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      overflow: hidden;

      p {
        font-size: 13px;
        color: #f25858;
        margin: 0 5px 0;
        i {
          margin-right: 5px;
        }
      }

      button {
        flex-shrink: 0;
      }
    }

    // input prefix
    .ant-input-affix-wrapper {
      font-size: 25px;
    }
    .ant-input-affix-wrapper .ant-input-suffix {
      left: 0;
      right: unset;
      color: #d8d8d8;
      transition: all 0.3s;
    }
    .ant-input-affix-wrapper input:hover + .ant-input-suffix,
    .ant-input-affix-wrapper input:focus + .ant-input-suffix,
    .ant-input-affix-wrapper input:active + .ant-input-suffix {
      color: #40c123;
    }

    // input
    .ant-input {
      font-size: 16px;
      line-height: 22px;
      padding: 14px 0 14px 40px;
      height: 50px;
      border: none;
      border-bottom: 1px solid #ebebeb;
      border-radius: 0;

      &:focus,
      &:hover {
        box-shadow: none;
        border-bottom-color: #40c123;
      }
    }

    // reset browser default setting
    input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
      -webkit-text-fill-color: #595959 !important;
    }

    .btn-plain {
      border: 1px solid #cecfd0;
      border-radius: 3px;
      font-weight: 600;
      color: #40c123;
      transition: all 0.3s;

      &:disabled {
        background: #eeeeee;
        color: #ffffff;
        border-color: #eeeeee;
      }
    }
    .get-sms-code-btn {
      position: absolute;
      right: 0;
      bottom: -50%;
      width: 85px;
      text-align: center;
      padding: 0;
    }

    button[type='submit'] {
      width: 100%;
      height: 45px;
      font-size: 16px;
      background: #40c123;
      box-shadow: 0 5px 15px 0 rgba(64, 193, 35, 0.4);
      border-radius: 4px;

      &:disabled {
        color: #ffffff;
        background: rgba(64, 193, 35, 0.2);
        box-shadow: none;
        border: none;
      }
    }
  }
}
